import React from 'react';
import {Form, Icon, Input, Button, Checkbox} from 'antd';
// import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' 
import './Login.css';


/* 导出一个Login */
// export default class Login extends React.Component{
//     // 是否登录的状态， 看cookie是否有login字段
//     state = {
//         isLogin: document.cookie.includes('login=true')
//     }
//     // 点击的时候，切换state状态，这个时候会导致render
//     handleClick = () => {
//         let login = !this.state.isLogin
//         this.setState({
//             isLogin: login
//         })
//         // 如果是登录状态，那么就设置cookie，并且跳回到跳来的网页
//         if(login){
//             // 设置cookie之后跳转回来时的页面
//             this.setCookie('login', true, 15)
//             this.jumpBack()
//         } else {
//             // 设置时间为负数, 取消设置的 cookie
//             this.setCookie('login', '', -1)
//         }

//     }
//     // 设置cookielet 
//     setCookie = (key, value, day) => {
//         let expires = day * 86400 * 1000  // 时间转化成 ms
//         let date = new Date( + new Date() + expires) // 当前时间加上要存储的时间
//         document.cookie = `${key}=${value};expires=${date.toUTCString()}`
//     }


//     jumpBack = () => {
//         // 打哪儿来回哪去
//         const { location } = this.props
//         const from = location.state && location.state.from
//        //  const article = location.state && location.state.article
        // this.props.history.push({
        //     pathname: from,
        //     state: {
        //         // article
        //     }
        // })
//     }

//     // 渲染页面。
//     render() {
//         return (
//             <div className={'login'}>
//                 <button  onClick={this.handleClick}>{ this.state.isLogin ? '退出' : '登录' }</button>
//             </div>
//         );
//     }
// }



class NormalLoginForm extends React.Component {
    state = {
        isLogin : document.cookie.includes('Login=true')
    }

    setCookie = (key, value, day) => {
        let exp = day * 86400 * 1000;
        let date = new Date( + new Date() + exp);
        document.cookie = `${key}=${value};expires=${date.toUTCString()}`;
    }

    jumpback = () => {
        console.log(this.props)
        const {history } = this.props;
        history.push('/');
        // const from = loction.state && loction.state.from;
        // this.props.history.push({
        //     pathname: from,
        //     state: {
        //         // article
        //     }
        // })
    }

    handleSubmit = (e) => {
        console.log(213);
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
        if (!err) {
            console.log('Received values of form: ', values);
        }
        if (values.userName === 'admin' && values.password === 'admin123') {
            let login = !this.state.isLogin;
            this.setState({
                isLogin : login
            })
            if(login) {
                console.log(1)
                this.setCookie('login', true, 15);
                this.jumpback();
            } else {
                console.log(11)
                this.setCookie('login', '', -1);
            }
        } else {
            this.reset();
            alert ("密码错误");
        }
        });
    }

    check = (rule, value, callback) => {
        if (value.length < 8) {
            callback('账户密码要大于8');

        }
        callback();
    }

    reset = () => {
        this.props.form.resetFields();
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let logoTextStye = {
            fontSize : '30px',
            color : 'white',
            textAlign : 'center'
        }
        return (
        <div className = "main">
        <Form onSubmit={this.handleSubmit} className="login-form">
            <div style = {logoTextStye}>祈通校园</div>
            <Form.Item>
            {getFieldDecorator('userName', {
                rules: [
                    { required: true, message: 'Please input your username!' }
                ],
            })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
            )}
            </Form.Item>
            <Form.Item>
            {getFieldDecorator('password', {
                rules: [{ required: true, message: 'Please input your Password!' },{
                    validator: this.check
                }],
            })(
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
            )}
            </Form.Item>
            <Form.Item>
            {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
            })(
                <Checkbox>Remember me</Checkbox>
            )}
            <Button type="primary" htmlType="submit" className="login-form-button">
                Log in
            </Button>
            <a className="login-form-forgot" href="www.baidu.com">Forgot password</a>

            <a href="www.baidu.com" style={{float:'left'}}>register now!</a>
            </Form.Item>
        </Form>
        </div>
        );
    }
}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(NormalLoginForm);

export default WrappedNormalLoginForm;